<template>
    <div class="container-root">
      <div class="header">
        <a-row style="width: 100%">
          <a-col span="12">
            <span class="title">附件对比</span>
          </a-col>
          <a-col span="12" style="text-align: right">
            <a-icon v-if="fileShow" type="arrow-left" class="icon-css" @click="goBack" />
          </a-col>
        </a-row>
      </div>
      <div v-show="resize" class="container2"></div>
      <div class="container">
        <div v-if="fileShow" class="file-show"><iframe width="100%" height="94%" :src="filePreview(fileurl)+'#view=FitH,top'"></iframe></div>
        <div style="margin-top: 15px">
          <div v-if="allMaterialShow">
            <div v-for="(materialAll, mIndex) in materialAllList" :key="materialAll.id" class="material-div">
              <div class="material-title">{{ mIndex + 1 + '. ' + materialAll.name }}</div>
              <div class="div-css" v-for="(item, index) in materialAll.materialList" :key="index">
                <a-row>
                  <a-col span="18">{{ item.material_name ? item.material_name : '' }}</a-col>
                  <a-col span="6" style="text-align: right" v-if="item.status">
                    <a-popover v-if="item.opinion" title="审查意见">
                      <template slot="content">
                        <p>{{ item.opinion }}</p>
                      </template>
                      <a-tag :color="St_attach[item.status].color"
                        >{{ St_attach[item.status].name }} <a-icon type="message" theme="filled"
                      /></a-tag>
                    </a-popover>
                    <a-tag v-else :color="St_attach[item.status].color">{{ St_attach[item.status].name }}</a-tag>
                  </a-col>
                </a-row>
                <div class="div-in-css">
                  <div v-if="item.fileList && item.fileList.length">
                    <a v-for="(file, fIndex) in item.fileList" :key="file.id" @click="openFile(file)"> {{ file.name }}</a>
                  </div>
                  <div v-else>
                    未上传附件
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-for="(item, index) in materialAllList" :key="item.id" class="material-div">
              <a-row>
                <a-col span="18"
                  ><div class="material-title">{{ index + 1 + '. ' + item.name }}</div></a-col
                >
                <a-col span="6" style="text-align: right">
                  <a-popover v-if="item.opinion" title="审查意见">
                    <template slot="content">
                      <p>{{ item.opinion }}</p>
                    </template>
                    <a-tag :color="St_attach[item.status].color"
                      >{{ St_attach[item.status].name }} <a-icon type="message" theme="filled"
                    /></a-tag>
                  </a-popover>
                  <a-tag v-else :color="St_attach[item.status].color">{{ St_attach[item.status].name }}</a-tag>
                </a-col>
              </a-row>
              <div v-if="item.fileList && item.fileList.length">
                <a v-for="(file, fIndex) in item.fileList" :key="file.id" @click="openFile(file)">{{ file.name }}</a>
              </div>
              <div v-else>
                未上传附件
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
   
  <script>
//   import { St_attach } from '@/enumeration/St_attach'
  import { queryAllMaterialList, queryMatterAttachList } from '@/api/apply/apl_matter_attach'
  import { filePreview } from '@/utils/util'
  export default {
    props: {
      applyid: String,
      resize: {
        // 是否在调整宽度
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        St_attach: St_attach,
        materialAllList: [],
        fileShow: false,
        fileurl: '',
        allMaterialShow: true // 是否显示全部材料列表
      }
    },
    created() {
      this.open()
    },
    methods: {
      async open() {
        if (!this.materialAllList.length) {
          let res = await queryAllMaterialList({ applyid: this.applyid })
          if (res.data && res.data.length) {
            this.materialAllList = res.data
            this.allMaterialShow = true
          }
        }
        if (!this.materialAllList.length) {
          let res = await queryMatterAttachList({ applyid: this.applyid })
          if (res.data && res.data.length) {
            this.materialAllList = res.data
            this.allMaterialShow = false
          }
        }
      },
      openFile(file) {
        this.fileShow = true
        this.fileurl = file.url
      },
      goBack() {
        this.fileShow = false
      },
      filePreview(url) {
        return filePreview(url)
      }
    }
  }
  </script>
   
  <style scoped>
  a {
    display: block;
    padding: 5px;
    color: rgba(0, 0, 0, 0.8);
  }
  a:hover {
    background-color: #e7e7e7;
    color: #57b0f9;
    border-radius: 4px;
  }
  .title {
    padding-left: 20px;
    font-size: 1.1rem;
    font-weight: 600;
  }
  .header {
    height: 30px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 20px 0;
  }
  .container-root {
    height: 100%;
    position: relative;
    font-size: 1rem;
  }
  .container {
    height: 95%;
    overflow: auto;
  }
  .container2 {
    width: 100%;
    height: 95%;
    position: absolute;
    z-index: 2;
  }
  .icon-css {
    margin-right: 20px;
    cursor: pointer;
    font-size: 1.2rem;
  }
  .div-css {
    margin: 10px;
    background-color: #ededed;
    padding: 8px;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.8);
  }
  .div-in-css {
    background-color: #ffffff;
    padding: 5px;
    margin-top: 6px;
    border-radius: 5px;
  }
  .material-title {
    font-weight: 600;
    padding-left: 10px;
  }
  .material-div {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 15px;
  }
  .file-show {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #ffffff;
  }
  </style>